<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i>
                </el-breadcrumb-item>
                <el-breadcrumb-item>管理员信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" >
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="100px" >
                    <el-form-item label="店主">
                        <el-input v-model="form.name" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.password" ></el-input>
                    </el-form-item>
                </el-form>

            </div>
            <div>
                <el-button  type="text"  class="el-icon-plus" @click= "newServer()" plain>新增客服</el-button>
                <br>

                <el-table
                        :data="tableData"
                        style="width: 70%">
                    <el-table-column
                            label="入职日期"
                            width="180">
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px">{{ scope.row.date }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="姓名"
                            width="180">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>姓名: {{ scope.row.name }}</p>
                                <p>账号ID: {{ scope.row.id }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="手机号码"
                            width="180">
                        <template slot-scope="scope">
                            <i class="el-icon-phone"></i>
                            <span style="margin-left: 10px">{{ scope.row.phonenumber }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog title="编辑" :visible.sync="editVisible" width="40%">
                <el-form ref="form_1" :model="form_1" label-width="100px" >
                    <el-form-item label="姓名" >
                        <el-input v-model="form_1.name"></el-input>
                    </el-form-item>
                    <el-form-item label="账号ID" >
                        <el-input v-model="form_1.id"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" >
                        <el-input v-model="form_1.password"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" >
                        <el-input v-model="form_1.phonenumber"></el-input>
                    </el-form-item>

                    <el-form-item label="入职日期">
                        <el-date-picker
                                v-model="form_1.date"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>


                </el-form>

                <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
            </el-dialog>

            <el-dialog title="编辑" :visible.sync="newVisible" width="40%">
                <el-form ref="form_2" :model="form_2" label-width="100px" >
                    <el-form-item label="姓名" >
                        <el-input v-model="form_2.name"></el-input>
                    </el-form-item>
                    <el-form-item label="账号ID" >
                        <el-input v-model="form_2.id"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" >
                        <el-input v-model="form_2.password"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" >
                        <el-input v-model="form_2.phonenumber"></el-input>
                    </el-form-item>

                    <el-form-item label="入职日期">
                        <el-date-picker
                                v-model="form_2.date"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>


                </el-form>

                <span slot="footer" class="dialog-footer">
                <el-button @click="newVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleNew">确 定</el-button>
            </span>
            </el-dialog>

        </div>
    </div>
</template>

<script>
    export default {
        name: 'editAccount',
        data() {
            return {
                tableData: [],

                form: {
                    name: 'admin',
                    password:'',


                },
                form_1:{},
                form_2:{},
                idx: -1,
                editVisible:false,
                newVisible:false,

            };
        },
        created() {
            this.getData();
        },
        methods: {

            getData(){
                this.$axios
                    .post('/editAccount', {
                        params: "getAccount"
                    })
                    .then(successResponse => {
                        var str=successResponse.data;
                        let arr = new Array();
                        arr=str.split(',');


                        for(let i=0; i<arr.length; i++)
                        {
                            let todoObj={
                                name: arr[i],
                                id:arr[++i],
                                date: arr[++i],
                                phonenumber:arr[++i]
                            };

                            this.tableData .push(todoObj);
                        }
                    })
            },
            handleEdit(index, row) {
                this.idx = index;
                this.form_1 = row;
                this.editVisible = true;

            },
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })

                    .then(() => {
                        this.$axios
                            .post('/editAccount', {
                                params: "del",
                                name:row.name
                            })
                            .then(successResponse => {
                                if(successResponse.data="ok")
                                {
                                    this.$message.success('删除成功');
                                    this.tableData.splice(index, 1);
                                }
                            })

                    })
                    .catch(() => {});
            },
            newServer(){
                this.newVisible=true;
                },
            handleNew(){
                if(this.form_2.name==undefined||this.form_2.id==undefined||this.form_2.phonenumber==undefined
                    ||this.form_2.password==undefined||this.form_2.date==undefined){
                    this.$message.warning("不可为空");
                }
                else {
                    var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                    if(!reg.test(this.form_2.phonenumber)){
                        this.$message.warning("手机号码格式错误");
                    }
                    else{
                        this.$axios
                            .post('/editAccount', {
                                params: "newServer",
                                name: this.form_2.name,
                                id: this.form_2.id,
                                phonenumber: this.form_2.phonenumber,
                                date: this.form_2.date,
                                password:this.form_2.password
                            })
                            .then(successResponse => {
                                if (successResponse.data == "newServerSuccess") {
                                    this.newVisible = false;
                                    this.tableData .push({
                                            name: this.form_2.name,
                                            id: this.form_2.id,
                                            phonenumber: this.form_2.phonenumber,
                                            date: this.form_2.date,
                                        }
                                    );
                                    this.$message.success("新增客服信息成功");
                                    this.form_2={};
                                }

                            })
                    }
                }
            },

            saveEdit(){
                if(this.form_1.name==undefined||this.form_1.id==undefined||this.form_1.phonenumber==undefined
                    ||this.form_1.date==undefined){
                    this.$message.warning("不可为空");
                }
                else {
                    var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                    if(!reg.test(this.form_1.phonenumber)){
                        this.$message.warning("手机号码格式错误");
                    }
                    else{
                        this.$axios
                            .post('/editAccount', {
                                params: "editServer",
                                name: this.form_1.name,
                                id: this.form_1.id,
                                phonenumber: this.form_1.phonenumber,
                                date: this.form_1.date,
                                password:this.form_1.password
                            })
                            .then(successResponse => {
                                if (successResponse.data == "editSuccess") {
                                    this.editVisible = false;
                                    this.$set(this.tableData, this.idx, this.form_1);
                                    this.$message.success("修改客服信息成功");
                                }

                            })
                    }
                }
            }
        }
    };
</script>